import { createRouter, createWebHashHistory, createWebHistory, createMemoryHistory } from 'vue-router'

import LoginView from '../pages/Login/LoginView.vue'
import GoodsView from '../pages/goods/GoodsView.vue'
import Error404 from '../pages/Error404.vue'

//路由配置数组
export const routes = [
    //重定向：地址栏访问的是a页面，会自动跳转到指定页面，这个就是重定向
    {
        path: '/',
        redirect: '/login',
        meta: { show: false }
    },
    {
        path: '/login',
        component: LoginView,
        meta: { title: '登录页', auth: false, KeepAlive: true }

    },
    //query传参的配置
    {
        path: '/goods',
        component: GoodsView,
        meta: { title: '商品页', auth: false, KeepAlive: true },
        //重定项
        redirect: '/goods/list',
        //嵌套路由
        children: [
            {
                // path:'list',
                path: '/goods/list',  //推荐 便于查找
                component: () => import('../pages/goods/GoodsList.vue'), //路由懒加载
            },
            {
                // path:'type',
                path: '/goods/type',  //推荐 便于查找
                component: () => import('../pages/goods/GoodsType.vue'), //路由懒加载
            },
            {
                // path:'add',
                path: '/goods/add',  //推荐 便于查找
                component: () => import('../pages/goods/GoodsAdd.vue'), //路由懒加载
            }
        ]
    },

    //params传参的配置(命名路由)
    // {
    //     name:'goods',
    //     path:'/goods/:id',
    //     component:GoodsView
    // },

    //输入不存在的路径的时候，会重定向到404页面
    {
        path: '/:pathMatch(.*)*', //这是404页面
        component: Error404
    }
]

//动态路由,根据用户登录的角色判断数据信息
const dynamicRoutes = [
    {
        path: '/total/order',
        component: () => import('../pages/sales/OrderTotal.vue'),
        meta: { roles: ['super'] }
    },
    {
        path: '/total/sales',
        component: () => import('../pages/sales/SalesTotal.vue'),
        meta: { roles: ['super'] }
    },
]




const router = createRouter({
    // history:createWebHashHistory(),//路由模式，hash模式，history模式，memory模式
    history: createWebHistory(),//历史模式
    // history:createMemoryHistory(),//memory
    routes,   //路由中url和组件一一对应的映射数组


})

//addRoute方法吧路由添加到路由实例中
dynamicRoutes.forEach((item) => {
    if (item.meta.roles.includes('super')) { //后面的super是用户登录时获取到的用户的角色
        router.addRoute(item)
    }
})

//全局前置路由守卫：页面跳转完成前，比如控制页面能否跳转、重定向
router.beforeEach((to, from, next) => {
    console.log(to?.meta?.title, from, 'to, from, next');
    //to   到哪里去
    //from 从那里来
    //next 传入参数为路由配置中的path，代表跳转到指定的路由
    next() //不传参就代表直接放行

    //如果用户登陆了就可以获取到token，此时可以利用token来判断用户是否登录，进而
    // if (已经登录, 有token) {
    //     if (跳转的是登录页) {
    //         next(强制跳转到首页)
    //     } else {
    //         next()
    //     }
    // } else {  //没有登录
    //     next('login')
    // }
})
//全局后置路由守卫：页面跳转后完成一些事情
router.afterEach((to, from) => {
    console.log(to, from);
})

// 实际使用到两全局守卫的场景：页面跳转是时显示loading动画，页面跳转完成后隐藏loading动画

export default router